<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>
    <style>
        table {
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        th, td {
            border: 1px solid;
            text-align: center;
        }

        div {
            text-align: center;
            margin: 50px;

        }

    </style>
</head>
<body>
<div id="">
    <input type="text" id="id" placeholder="请输入id">
    <input type="text" id="name" placeholder="请输入名字">
    <input type="text" id="gender" placeholder="请输入性别">
    <input type="button" id="btn" value="提交">
</div>
<table>
    <caption>学生信息表</caption>
    <tr>
        <th>id</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>1</td>
        <td>张飞</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td>
    </tr>
    <tr>
        <td>2</td>
        <td>关羽</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>
    <tr>
        <td>3</td>
        <td>唐僧</td>
        <td>女</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>
</table>

<script>
    //添加值
    let btn = document.getElementById("btn");
    btn.onclick = function () {
        let id = document.getElementById("id").value;
        let name = document.getElementById("name").value;
        let gender = document.getElementById("gender").value;


        let table = document.getElementsByTagName("table")[0];
        // table.innerHTML += "  <tr>\n" +
        //     "        <td>"+id+"</td>\n" +
        //     "        <td>"+name+"</td>\n" +
        //     "        <td>"+gender+"</td>\n" +
        //     "        <td><a href=\"javascript:void(0);\">删除</a></td>\n" +
        //     "    </tr>"

        table.innerHTML += `
        <tr>
        <td>${id}</td>
        <td>${name}</td>
        <td>${gender}</td>
        <td><a href="javascript:void(0); " onclick="delTr(this);">删除</a></td>
    </tr>
        `;


    }

    function delTr(obj) {
       let table = obj.parentNode.parentNode.parentNode;
       let tr = obj.parentNode.parentNode;

       table.removeChild(tr);

    }

</script>
</body>
</html>